<template>
    <div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="leave_header_title">
                <div class="leave_title">
                    <div class="leave_left">
                        企业列表
                    </div>
                    <div class="leave_right choose_right_input">
                        <el-input type="text" placeholder="请输入企业名称" v-model="searchText" clearable @clear="loadAccountList()"></el-input><el-button type="primary" size="small" @click="loadAccountList()">搜索</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="enterpriseName" label="企业名称"> </el-table-column>
            <el-table-column prop="availableBalance" label="汇票豆账户余额（个）"> </el-table-column>
            <el-table-column prop="totalRecharge" label="充值金额（元）"> </el-table-column>
            <el-table-column prop="totalIncome" label="收入总额（个）"> </el-table-column>
            <el-table-column prop="totalExpenditure" label="支出总额（个）"> </el-table-column>
            <el-table-column fixed="right" label="操作"> 
                <template slot-scope="scope">
                    <el-button size="small" @click="onRechargeClick(scope.row)" class="check_btn_style">充值</el-button>
                    <el-button size="small" @click="onDetail(scope.row)" class="check_btn_style">收支明细</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear pagingbar">
            <el-pagination
            @size-change="onSizeChange"
            @current-change="onFlipOver"
            :current-page="pagination.currentPage"
            :page-sizes="pagination.pageSizes"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
            </el-pagination>
        </div>
        <!-- Dialog -->
        <div class="reminder-dialog">
            <el-dialog title="请核对并充值" :visible.sync="centerDialogVisible" width="30%" center @closed="onCloseRechageDialog">
                <el-form ref="recharge" label-width="120px" :modal="recharge" size="small">
                    <el-form-item label="企业名称：" label-position="left">
                        <span>{{this.enterpriseName}}</span>
                    </el-form-item>
                    <el-form-item label="输入充值金额：" label-position="left">
                        <el-input v-model="recharge.money" type="number" suffix-icon="iconfont icon-yuan"></el-input>
                    </el-form-item>
                    <el-form-item label="选择兑换比率：" label-position="left">
                        <el-select v-model="recharge.ratio" value-key="value">
                            <el-option
                                    v-for="(ratio, index) in ratios"
                                    :label="ratio.label"
                                    :value="ratio.value"
                                    :key="index"></el-option>
                        </el-select>
                        <span>兑换汇票豆 <i class="draft_i_style">{{ recharge.sum }} 个</i></span>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer submit-btn">
                <el-button size="small" type="info" @click="centerDialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="onRechargeSubmit">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Watch } from 'vue-property-decorator';
    import math from 'mathjs';
    import Pagination from "@/types/Pagination";

    @Component({
        extends: Pagination
    })
    export default class DraftBeans extends Vue {
        activeName = 'self';
        enterpriseId = '';
        enterpriseName = '';
        tableData = [];
        searchText = '';
        centerDialogVisible = false;
        recharge = {
            money: '',
            ratio: 1,
            sum: '0'
        };
        ratios = [
            { label: '1:1', value: 1},
            { label: '1:1.1', value: 1.1},
            { label: '1:1.2', value: 1.2},
            { label: '1:1.3', value: 1.3},
            { label: '1:1.4', value: 1.4},
            { label: '1:1.5', value: 1.5},
        ]

        /**
         * 查询所有汇票豆账户列表
         */
        async loadAccountList() {
            let res = await this.$http.post('draftbean/accounts/list', {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                enterpriseName: this.searchText
            })
            if (res.status == 200) {
                let { items, totalNum } = res.data;
                this.tableData = items;
                this.pagination.total = totalNum;
            }
        }

        /**
         * 充值汇票豆
         */
        async rechargeDraftBeans() {
            let conversionRule = this.ratios.findIndex(e => e.value === this.recharge.ratio)+1;
            let res = await this.$http.post('draftbean/accounts/recharge', {
                enterpriseId: this.enterpriseId,
                rechargeAmount: this.recharge.money,
                rechargeDraftBean: this.recharge.sum,
                conversionRule: conversionRule
            })
            return res;
        }

        /**
         * 修改汇票豆兑换比率
         */
        @Watch('recharge.ratio')
        ratioChange(newVal:number, oldVal:number) {
            if (this.recharge.money) {
                this.recharge.sum = math.round((newVal * this.recharge.money), 2)
            }
        }
        /**
         * 修改充值金额
         */
        @Watch('recharge.money')
        moneyChange(newVal:number, oldVal:number) {
            this.recharge.sum = math.round((newVal * this.recharge.ratio), 2);
        }

        /**
         * 为企业充值
         */
        onRechargeClick(row:any) {
            this.enterpriseName = row.enterpriseName
            this.centerDialogVisible = true;
            this.enterpriseId = row.enterpriseId;
        }

        /**
         * 充值提交
         */
        async onRechargeSubmit(row:Object) {
            if (this.recharge.money == '') {
                this.$alert('请输入充值金额！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            let res = await this.rechargeDraftBeans()
            if (res.status == 200 && res.success) {
                this.centerDialogVisible = false;
                this.loadAccountList();
            } else {
                this.$message(res.msg);
            }
        }

        /**
         * 关闭充值弹窗重置
         */
        onCloseRechageDialog() {
            this.enterpriseId = '';
            this.recharge = {
                money: '',
                ratio: 1,
                sum: ''
            }
        }

        /**
         * 查看企业收支明细
         */
        onDetail(row:Object) {
            this.$router.push(`draftbeans/detail/${row.enterpriseId}`)
        }

        loadDataForPagination() {
            this.loadAccountList()
        }

        // life circle
        mounted() {
            this.loadAccountList();
        }
    }
</script>

<style scoped lang="scss">

</style>